<template>
    <div class="headerInfoContainer">
        <div class="headerTop">
            <div class="headerTopLeft">
                <div class="linedIconContainer" @click="changeCollapse()">
                    <component :is="isCollapse ? 'MenuUnfoldOutlined' : 'MenuFoldOutlined'" class="linedIconClass"></component>
                </div>

                <el-breadcrumb separator-icon="RightOutlined">
                    <el-breadcrumb-item v-for="item in routerBreadcrumb" :key="item.path"
                                        :to="item.path === '/' ? { path: '/ywu/index' } : ''" class="breadcrumbItemClass"
                    >
                        {{item.meta.title}}
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="headerTopRight">
                <el-dropdown class="userRoleDropdown">
                    <el-button type="primary" plain icon="DownOutlined">
                        用户角色
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="item in this.userRoleInfoList" :key="item.id">{{ item.roleName }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-dropdown class="userTenantDropdown" @command="handleUserTenantCommand">
                    <el-button type="primary"  plain icon="DownOutlined">
                        {{ this.currentTenantInfo.tenantNameCn }}
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="item in this.userTenantInfoList" :key="item.id" :command="item.tenantId">{{ item.tenantNameCn }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-dropdown @command="handleCommand" class="dropdownClass">
                    <el-avatar :size="40" :src="circleUrl" />
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item style="display: flex; justify-content: center; align-items: center" command="userNickName" disabled>{{this.userInfo.userNickName}}</el-dropdown-item>
                            <el-dropdown-item style="display: flex; justify-content: center; align-items: center" command="userPersonCenter">个人中心</el-dropdown-item>
                            <el-dropdown-item style="display: flex; justify-content: center; align-items: center" command="userLogOut">登出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <div class="headerBottom">
            <el-tag
                v-for="tag in routerTags"
                :key="tag.path"
                :closable="tag.path !== '/ywu/index'"
                :disable-transitions="false"
                @close="handleTagClose(tag)"
                class="headerBottomTag"
                :effect="this.$route.path === tag.path ? 'dark' : 'light'"
                @click="handleTagClick(tag)"
            >
                {{ tag.meta.title }}
            </el-tag>
        </div>
    </div>
</template>

<script>
import {userDetailInfoQuery, userLogOutInfo, userTenantChangeInfo} from "@/request/user";

export default {
    name: "HeaderBar",
    data() {
        return {
            circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
            userInfo: "",
            userRoleInfoList: "",
            userTenantInfoList: "",
            currentTenantInfo: ""
        }
    },
    computed: {
        isCollapse() {
            return this.$store.state.isCollapse
        },
        routerBreadcrumb() {
            let matchedList = this.$route.matched;
            let restList = [...matchedList];
            // 判断最后一个的path是否为/ywu/index
            if (restList[restList.length - 1].path === '/ywu/index') {
                restList.pop()
            }
            return restList;
        },
        routerTags() {
            return this.$store.state.headerTags;
        }
    },
    methods: {
        changeCollapse() {
            this.$store.commit('changeCollapse');
        },
        handleTagClose(tag) {
            // 删除对应的tag
            this.$store.commit('deleteHeaderRouteTags', tag);
            // 删除的页签非当前页签，不做处理
            if (tag.path !== this.$route.path) {
                return;
            }
            // 获取当前所在的位置
            let index = tag.currentIndex
            let routerPath = ""
            // 如果当前页签所在的位置超过页签的长度，展示最后一个页签
            if (index >= this.$store.state.headerTags.length) {
                routerPath = this.$store.state.headerTags[this.$store.state.headerTags.length - 1].path
            } else {
                routerPath = this.$store.state.headerTags[index].path
            }
            this.$router.push(routerPath);
        },
        handleTagClick(tag) {
            // 点击当前页签不做任何操作
            if (tag.path !== this.$route.path) {
                this.$router.push(tag.path);
            }
        },
        handleCommand(command) {
            if (command === "userPersonCenter") {

            } else if (command === "userLogOut") {
                let param = {
                    userAccount: this.userInfo.userAccount
                }
                // 调用登出接口
                userLogOutInfo(param).then(res => {
                    if (res.code === '200') {
                        // 跳转路由到登录界面
                        this.$router.push("/login")
                    }
                })
            }
        },
        handleUserTenantCommand(command) {
            let param = {
                tenantId: command,
                userAccount: this.userInfo.userAccount,
                id: this.userInfo.id
            }
            userTenantChangeInfo(param).then(res => {
                if (res.code === '200') {
                    this.$router.go(0)
                }
            })
        }
    },
    created() {
        // 查询当前账号详情
        userDetailInfoQuery().then(res => {
            this.userInfo = res.data.userInfo
            this.userRoleInfoList = res.data.roleInfo
            this.userTenantInfoList = res.data.tenantList
            this.currentTenantInfo = res.data.currentTenantInfo
            // 构建对象，将对象存储在vuex中
            this.$store.state.userInfo = {
                userInfo: this.userInfo,
                userRoleInfoList: this.userRoleInfoList,
                userTenantInfoList: this.userTenantInfoList,
                currentTenantInfo: this.currentTenantInfo
            }
        })
    }
}
</script>

<style scoped lang="less">
    .headerInfoContainer {
        height: 100%;
        .headerTop {
            height: 60%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .headerTopLeft {
            height: 100%;
            display: flex;
            align-items: center;
            .linedIconClass {
                font-size: 20px;
                padding-right: 25px;
                padding-left: 10px;
            }
            .linedIconContainer {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .linedIconContainer:hover {
                cursor: pointer;
                background-color: rgba(0,0,0,.025);
            }
            .breadcrumbItemClass {
                //去除光标
                caret-color: transparent;
            }
        }
        .headerTopRight {
            margin-right: 5%;
            display: flex;
            align-items: center;
            .dropdownClass:hover {
                cursor: pointer;
                padding-right: 10%;
            }
            .userRoleDropdown {
                padding-right: 10%;
            }
            .userTenantDropdown {
                padding-right: 10%;
            }
        }
        .headerBottom {
            height: 40%;
            box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.2);
            //去除光标
            caret-color: transparent;
            display: flex;
            align-items: center;
            padding-left: 0.5%;
            .headerBottomTag {
                margin-right: 0.5%;
                height: 60%;
            }
            .headerBottomTag:hover {
                cursor: pointer;
            }
        }
    }
</style>